<!DOCTYPE html>
<html>
<head>
    <title>历史预算统计</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
</head>
<body>
<!--导航-->
<div class="weui-tab" style="height:32px;"   id="budgetTab">
    <div class="weui-tab-nav">
        <a href="javascript:setBudgetKeyAndSearch('p3');" class="weui-navbar__item weui-nav-green"> 月度预算 </a>
        <a href="javascript:setBudgetKeyAndSearch('p5');" class="weui-navbar__item weui-nav-green"> 年度预算</a>
    </div>
    <input type="text" style="display:none;" name='budgetKey' id="budgetKey" value="p3"/>
</div>
<!--上边框-->
<div  class="border-t w" ></div>
<!--查询条件-->
<div>
    <form id="search-form">
        <div class="weui-cell mulanbay_select-before ">
            <div class="weui-cell__hd" >
                <label class="weui-label">统计年/月</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="statDate" name="statDate" type="text">
            </div>
            <div class="weui-cell__hd">
                <a href="javascript:getData()" class="weui-btn weui-btn_mini weui-btn_primary">统计</a>
            </div>
        </div>
    </form>
</div>
<!--列表数据显示-->
<div id="dataContent"></div>
<div class="weui-tab" style="height:44px;"   id="statDataTab">
    <div class="weui-tab-nav">
        <a href="javascript:chatStat('LIST');" class="weui-navbar__item weui-nav-green"> 消费与收入分析  </a>
        <!-- 暂时注释图表统计模式，显示有些问题
        <a href="javascript:chatStat('CHAT');" class="weui-navbar__item weui-nav-green"> 图表模式</a>
        -->
    </div>
    <input type="text" style="display:none;" name='statType' id="statType" value="LIST"/>
</div>

<!--饼图数据显示-->
<div id="consumeContainer">
</div>
<div id="incomeContainer">
</div>
<br>

<!--底部按钮-->
<div align="center">
    <a href="javascript:gotoTop();" class="weui-btn weui-btn_mini weui-btn_primary">返回顶部</a>
</div>
<br>
<br>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<!--顶部导航使用-->
<script type="text/javascript" src="../../static/js/iscroll-lite.min.js"></script>
<script>
    $(function() {
        $('#budgetTab').tab({defaultIndex:0,activeClass:"bg-green"});
        $('#statDataTab').tab({defaultIndex:0,activeClass:"bg-green"});
        var period = getQueryVariable('period');
        if(period==null){
            period = 'MONTHLY';
        }
        var budgetKey='p3';
        if(period=='YEARLY'){
            $('#budgetKey').val('p5');
        }
        $('#budgetKey').val(budgetKey);
        formatStatDate(period);
        getData();
    });
    function formatStatDate(budgetKey) {
        var dateFormat='yyyy-mm';
        var dv='';
        var date = new Date();
        //获取上个月获取去年的默认值
        var year = date.getFullYear();
        var month = date.getMonth();
        if(month == 0){
            year = year -1;
            month = 12;
        }
        if(budgetKey=='p5'){
            dv=year-1;
            dateFormat='yyyy';
        }else {
            if(month<10){
                month='0'+month;
            }
            dv=year+'-'+month;
        }
        //$("#statDate").calendar('destroy');
        $("#statDate").calendar({
            dateFormat: dateFormat,
            onChange: function (p, values, displayValues) {
                if(values!=$('#statDate').val()){
                    //getData();
                }
            }
        });
        $("#statDate").val(dv);
    }
    function getSearchDate(budgetKey) {
        var statDate = $('#statDate').val();
        var para;
        if(budgetKey=='p3'){
            // 查询条件月的
            var nowDate = new Date(statDate+'-01');
            para = {
                startDate: getFirstDayOfMonth(nowDate),
                endDate: getLastDayOfMonth(nowDate)
            };
        }else if(budgetKey=='p5'){
            // 查询条件年的
            para = {
                startDate: statDate+'-01-01',
                endDate: statDate+'-12-31'
            };
        }
        return para;
    }
    function setBudgetKeyAndSearch(budgetKey) {
        $('#budgetKey').val(budgetKey);
        formatStatDate(budgetKey);
        getData();
    }
    function getData() {
        var statDate = $('#statDate').val();
        var para = {
            bussKey:statDate.replace('-','')
        };
        var url='/budgetLog/getPeriodStat';
        doAjax(para,url,'GET',false,function(data){
            if(data){
                createStatData(data);
                statConsume();
                statIncome();
            }else {
                $.toptip('未找到数据', 'error');
            }
        });
    }

    function statConsume(){
        var budgetKey =$('#budgetKey').val();
        var para = getSearchDate(budgetKey);
        var url='/buyRecord/statWithTreat';
        doAjax(para,url,'GET',false,function(data){
            var statType= $('#statType').val();
            if(statType=='LIST'){
                createListData(data,'buy.png','consumeContainer');
            }else{
                //生成饼图
                createPieDataEnhanced(data,'consumeContainer');
            }
        });
    }
    function statIncome(){
        var budgetKey =$('#budgetKey').val();
        var para = getSearchDate(budgetKey);
        var url='/income/stat';
        doAjax(para,url,'GET',false,function(data){
            var statType= $('#statType').val();
            if(statType=='LIST'){
                createListData(data,'income.png','incomeContainer');
            }else{
                //生成饼图
                createPieDataEnhanced(data,'incomeContainer');
            }
        });
    }
    function createListData(pieData,image,container) {
        var html='';
        var title = '<font color="green">'+pieData.title+'('+pieData.subTitle+')</font>';
        if(image=='buy.png'){
            title = '<a href="../buy/buyRecord.html" >'+title+'</a>\n';
        }else{
            title = '<a href="../fund/income.html" >'+title+'</a>\n';
        }
        html+='    <div class="weui-cells__title">'+title+'</div>\n';
        html+='    <div class="weui-cells">\n';
        if(pieData.detailData[0].data!=null&&pieData.detailData[0].data.length>0){
            var n= pieData.detailData[0].data.length;
            var total=0;
            for(var i=0;i<n;i++){
                var dd = pieData.detailData[0].data[i];
                total+=dd.value;
            }
            var sortData = pieData.detailData[0].data;
            sortData.sort(function(a,b){
                return b.value-a.value;
            });
            for(var i=0;i<n;i++){
                var dd = sortData[i];
                html+='        <div class="weui-cell">\n';
                html+='         <div class="weui-cell__hd"><img src="../../static/image/'+image+'" alt="" style="width:20px;margin-right:5px;display:block"></div>\n';
                html+='            <div class="weui-cell__bd">\n';
                html+='                <p>'+dd.name+'</p>\n';
                html+='            </div>\n';
                var pp = getPercentWithSambol(dd.value,total);
                var ss = '￥'+dd.value+'('+pp+')';
                html+='            <div class="weui-cell__ft">'+ss+'</div>\n';
                html+='         </div>\n';
            }
        }
        html+='    </div>\n';
        setElementInnerHTML(container,html);
    }
    function showSnapShot(id) {
        window.location.href='budgetSnapShot.html?budgetLogId='+id;
    }
    function createStatData(rowData) {
        var html='';
        html+='<div class="weui-form-preview">';
        html+='    <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:showSnapShot('+rowData.id+');">\n';
        html+='        <div class="weui-cell__hd"><img src="../../static/image/budget.png"></div>\n';
        html+='        <div class="weui-cell__bd">\n';
        html+='<label class="weui-form-preview__label mulanbay-dark-font">'+rowData.bussKey+'预算完成情况</label>';
        html+='        </div>\n';
        html+='        <div class="weui-cell__ft">预算快照</div>\n';
        html+='    </a>\n';
        html+='    <div class="weui-form-preview__bd">\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">预算金额</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+rowData.budgetAmount+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">普通消费</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+rowData.ncAmount+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">突发消费</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+rowData.bcAmount+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">看病花费</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+rowData.trAmount+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">收入统计</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+rowData.incomeAmount+'</span>\n';
        html+='        </div>\n';
        var totalConsume = rowData.ncAmount+rowData.bcAmount+rowData.trAmount;
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">总共消费</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+totalConsume.toFixed(2)+'</span>\n';
        html+='        </div>\n';
        var cb = totalConsume-rowData.budgetAmount;
        var cbTitle;
        if(cb>0){
            cbTitle='<font color="red">超出预算</font>';
        }else{
            cbTitle='<font color="green">低于预算</font>';
        }
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">'+cbTitle+'</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+Math.abs(cb).toFixed(2)+'</span>\n';
        html+='        </div>\n';
        var ci = totalConsume-rowData.incomeAmount;
        var ciTitle;
        if(ci>0){
            ciTitle='<font color="red">存款减少</font>';
        }else{
            ciTitle='<font color="green">存款增加</font>';
        }
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">'+ciTitle+'</label>\n';
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">￥'+Math.abs(ci).toFixed(2)+'</span>\n';
        html+='        </div>\n';
        html+='    </div>\n';
        html+='</div>\n';
        html+='<br>\n';
        setElementInnerHTML('dataContent',html);
    }

</script>
</body>
</html>